<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button onclick="alert('hello world')">弹出警告</button>
<button id="qw">弹出警告2</button>
<hr>
<h4>事件</h4>
<span>点击我弹出警告</span>
<h4>lklklklkl</h4>
<hr>
<div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At atque doloribus earum excepturi expedita,
        reiciendis sapiente vitae voluptatem! Autem dignissimos doloribus fugit libero magnam nobis odit quos
        reiciendis, totam voluptatum.
    </div>
    <div>Accusamus amet aperiam consectetur cupiditate dolore enim est excepturi facere fuga impedit ipsa itaque
        laudantium libero maxime minima modi nam necessitatibus neque obcaecati praesentium quod rerum, sequi tempora,
        ut, vitae?
    </div>
    <div>Ad aspernatur autem blanditiis dolores ea eaque eius facilis fugiat hic illum in ipsa maxime officia quia
        quibusdam quis soluta tempore tenetur totam, ut vel velit, voluptatum? At, debitis unde.
    </div>
    <div>Ab adipisci at, autem delectus deleniti deserunt dolorum eligendi eos excepturi, hic iusto laboriosam laborum
        maiores maxime nam nisi officia omnis perferendis perspiciatis quae recusandae sit, temporibus unde vero vitae.
    </div>
    <div>Atque culpa delectus dolore ducimus eos est fugiat harum id ipsum maxime nihil, nulla officiis quae quasi
        quibusdam quo, quos recusandae sint. A inventore nesciunt possimus praesentium veritatis voluptatem? Nostrum?
    </div>
    <div>Aliquam corporis distinctio impedit molestiae nulla omnis praesentium, quae quam, quos, ratione reiciendis
        temporibus vero? Cumque cupiditate et expedita nostrum quas soluta voluptas? Autem debitis est illum, ipsam
        libero soluta.
    </div>
    <div>Accusantium alias architecto consectetur corporis distinctio doloribus eveniet expedita fugit id illum in
        libero numquam officiis pariatur quasi quidem rem repellendus repudiandae sapiente totam ullam ut, velit veniam
        vitae voluptatum.
    </div>
    <div>Aliquam, beatae delectus eaque iusto laborum nisi nostrum perspiciatis quis sed. Ab aperiam beatae blanditiis
        cumque cupiditate, eligendi eos esse facilis, illo illum ipsa maiores neque non praesentium recusandae repellat!
    </div>
    <div>Aut molestiae molestias nesciunt voluptate. Dolores libero ratione reprehenderit tempore vero! Aliquid, aut,
        blanditiis earum error fugiat labore laborum magni pariatur perferendis perspiciatis quaerat ratione reiciendis
        rem tempora veniam voluptas?
    </div>
    <div>Nam, praesentium provident. Accusamus ad, aliquid assumenda at atque dolor dolore doloremque ea eligendi fuga
        iste, iusto, minus nemo neque omnis pariatur perferendis quaerat quam sapiente ullam velit vero voluptatibus?
    </div>
    <div>Ab accusantium atque commodi dignissimos dolor dolorum earum eius eligendi facilis fuga ipsam ipsum laudantium
        magnam molestias nemo odit perspiciatis provident quasi repellendus repudiandae rerum tempora, tenetur unde
        voluptates, voluptatibus.
    </div>
    <div>Ad asperiores, aspernatur blanditiis dolorem illo labore modi pariatur unde. Accusamus alias, eaque perferendis
        quaerat qui ratione reprehenderit ut. Atque dignissimos ducimus natus nobis placeat soluta ullam voluptate!
        Assumenda, pariatur!
    </div>
    <div>Ad culpa incidunt ipsa labore qui recusandae tenetur? Expedita maxime odit perspiciatis saepe vero! Cumque enim
        et exercitationem facilis neque, nisi nobis perferendis praesentium quibusdam quos saepe sit tenetur unde.
    </div>
    <div>Asperiores beatae consequuntur, corporis cupiditate debitis error, fugiat incidunt laborum molestias mollitia
        officiis perspiciatis, praesentium quidem quo quos rem sapiente sint soluta sunt tempore! Corporis debitis
        facilis laudantium nulla perspiciatis!
    </div>
    <div>At dolore error magni nisi odio praesentium quis sit soluta, voluptate? Amet architecto atque commodi cumque
        non recusandae sunt tempore, vero vitae voluptas. Ab adipisci eaque, quo ratione repellendus rerum.
    </div>
    <div>Alias animi beatae blanditiis consequuntur dicta, eos explicabo fugit iure nobis quia quo repudiandae tempora
        ullam vel veniam. Blanditiis cupiditate libero recusandae ut velit. Aspernatur dolor hic provident quia sit!
    </div>
    <div>Ipsum laboriosam magnam molestias totam vel? Aliquam, atque unde! Ad alias, aliquam autem cum distinctio
        dolorum eaque eos, esse ex facilis, harum mollitia placeat quidem suscipit tempore vel vero voluptatibus.
    </div>
    <div>Asperiores at atque consequuntur laboriosam libero obcaecati odit officiis quaerat recusandae repellat.
        Deserunt dolores dolorum nulla omnis quo suscipit voluptatem voluptates! Amet at beatae distinctio inventore,
        necessitatibus nemo ratione voluptates!
    </div>
    <div>A adipisci, amet cumque, dolore eaque error est fugiat, illo in maxime molestiae mollitia nisi pariatur
        praesentium quibusdam quidem ratione ut! Aliquid ipsa natus nemo nostrum nulla, perspiciatis quae tenetur?
    </div>
    <div>A accusamus accusantium amet consequatur delectus deleniti dolorem earum error explicabo incidunt iste
        laboriosam laborum magni minus natus nihil non optio praesentium quos saepe, sed soluta, temporibus ut, vero
        voluptatum.
    </div>
    <div>Adipisci consequatur consequuntur debitis est et eveniet, excepturi facilis id iste libero, minima
        necessitatibus officia quaerat quasi quia, rerum tempore totam unde voluptas voluptatibus. Dolor eum ipsa
        obcaecati perspiciatis voluptatum.
    </div>
    <div>Aliquam assumenda est natus obcaecati perferendis placeat sequi? Animi dignissimos laboriosam nihil nostrum
        officia, perspiciatis quae temporibus! Debitis doloremque, eius labore magnam mollitia natus omnis perferendis
        quisquam sed voluptatum! Cum!
    </div>
    <div>Hic porro quis temporibus tenetur? Ad delectus dolorum ducimus laudantium odio, quasi quisquam similique
        voluptatum. A accusamus atque beatae consequuntur, excepturi magni minima natus, odit quam quos reprehenderit
        voluptates voluptatibus?
    </div>
    <div>Cupiditate dignissimos est ex, facilis fuga illum incidunt itaque minima nesciunt quos tempora totam vero
        voluptate. Accusamus deleniti dolorem doloribus fugiat in inventore ipsa nemo provident quas, rem reprehenderit
        tempora!
    </div>
    <div>Accusamus adipisci consequatur eaque molestias officia possimus similique sint ullam ut voluptas? A adipisci
        animi commodi dolore doloremque dolorum ducimus error inventore nesciunt, non odio pariatur reiciendis sequi ut,
        voluptates!
    </div>
    <div>Atque iusto sint soluta! Aliquid et excepturi exercitationem itaque laborum magnam perferendis reprehenderit
        saepe sapiente sint vel velit voluptatem, voluptatum. Accusamus, fuga vero. Dolor, exercitationem incidunt
        molestias mollitia placeat sapiente.
    </div>
    <div>A architecto beatae consequuntur cumque cupiditate dolor doloribus dolorum, error esse fugit illo laboriosam
        magnam modi molestiae mollitia necessitatibus nulla odio omnis quaerat quos rem repellat sequi, suscipit
        tenetur, ullam.
    </div>
    <div>Adipisci aliquam animi consequuntur, dignissimos eius eveniet exercitationem iste, laboriosam magnam maiores
        minus modi molestiae nihil nobis nostrum numquam odio placeat quidem rerum vitae! Iusto molestiae neque nulla
        quos sunt.
    </div>
    <div>Architecto cum nostrum saepe ullam. A, at cumque deleniti ex exercitationem fuga, harum in natus neque possimus
        quaerat, repellendus velit vitae! A ab harum impedit labore quae quia tempora vitae.
    </div>
    <div>Deserunt ullam, veniam? Alias atque, beatae blanditiis cumque cupiditate delectus deleniti ducimus, earum
        mollitia nam necessitatibus perferendis praesentium qui quidem quisquam reprehenderit tempore unde. Quaerat,
        reiciendis, reprehenderit. Commodi, fugit rem.
    </div>
    <div>Aspernatur dolor esse fuga laborum minus non reprehenderit sequi totam, vero. Assumenda ducimus ea et eum hic
        impedit iure iusto magni molestiae, quia. Accusamus culpa doloremque esse modi provident tenetur.
    </div>
    <div>Adipisci amet animi aperiam corporis dicta eius eum ex fuga harum, id impedit ipsam iste modi odit omnis
        perferendis quae quasi, quidem quisquam repudiandae saepe sequi similique tempore vel voluptatem?
    </div>
    <div>Accusamus, accusantium commodi corporis deserunt dicta dolore doloremque, ex iure labore laborum molestiae
        necessitatibus obcaecati omnis perspiciatis ratione soluta sunt, voluptas! Accusamus, exercitationem nihil nobis
        numquam placeat quidem repudiandae voluptatum?
    </div>
    <div>Aliquid, delectus deleniti. Consequuntur cupiditate fuga maxime nihil unde velit vero. Aliquam beatae earum
        ipsam nulla voluptatem. A adipisci, distinctio dolorem error et in ipsam laudantium maiores, nisi quidem quo.
    </div>
    <div>Dignissimos non, provident? Aliquid doloribus expedita harum libero necessitatibus nemo officia optio quia
        repellat sed? Ab accusamus error non optio quam repellat vel, voluptatibus. Dignissimos dolores non vel
        veritatis voluptates.
    </div>
    <div>Est excepturi id ipsam odio perferendis sequi sint, ullam. Aspernatur maiores, nulla quibusdam velit veniam
        voluptas. Esse ipsam laborum magnam natus placeat quod recusandae reprehenderit saepe temporibus unde. Ea,
        earum?
    </div>
    <div>Animi architecto atque autem deleniti eius eligendi, exercitationem hic laborum mollitia nihil odio porro
        quaerat quam quia quis tenetur voluptates? Alias cumque doloremque explicabo id numquam quam recusandae sunt
        tempora.
    </div>
    <div>Autem debitis eaque earum, eius error esse impedit molestias obcaecati pariatur placeat porro, quas reiciendis
        tempore? Consectetur delectus dolorum eligendi illum inventore magnam quae quas, quia quos sequi suscipit vero?
    </div>
    <div>Ad autem debitis impedit labore magnam natus nesciunt nihil obcaecati sit vero? Architecto beatae consequatur
        consequuntur doloremque exercitationem, id illum iste odit officiis perferendis, quos ratione sed tempora
        veritatis voluptatibus!
    </div>
    <div>Blanditiis delectus eveniet fugit hic magnam necessitatibus nostrum praesentium quos, similique voluptates.
        Commodi corporis delectus error excepturi expedita iure magnam maxime neque nostrum porro praesentium, quo
        recusandae sed veniam voluptatibus?
    </div>
    <div>Ea facere soluta ut. Autem deleniti dignissimos dolore labore quam quibusdam reiciendis soluta suscipit unde
        voluptatibus. Adipisci animi deleniti explicabo fugiat ipsa nobis nulla quis, quisquam, sapiente totam ullam
        vero.
    </div>
    <div>Aliquid blanditiis doloribus libero natus nemo nobis, perferendis quam. Amet assumenda, eius esse iusto,
        laborum maxime minima numquam odio porro reprehenderit repudiandae temporibus voluptatibus? Atque consequatur
        dicta explicabo nam rem.
    </div>
    <div>Alias aliquid asperiores at cum dicta enim, explicabo fugiat iste necessitatibus nemo neque nulla odit pariatur
        praesentium quam quas quidem quod repellendus unde ut! Culpa facere maiores necessitatibus nobis ullam.
    </div>
    <div>Ab aliquam aperiam culpa ducimus ea eius expedita harum ipsam laboriosam laborum libero magnam minima nesciunt
        nihil nulla officia, quam quas quia quibusdam quidem repudiandae tenetur totam. Labore placeat, quos!
    </div>
    <div>Accusamus asperiores aspernatur consequatur dolor earum eligendi eum eveniet excepturi facere incidunt iste
        itaque neque nostrum numquam optio pariatur placeat possimus provident qui quia, quod quos ratione rem sint
        vero.
    </div>
    <div>Adipisci, commodi cupiditate delectus deserunt, dolore fuga illo impedit inventore maiores minus molestias
        natus nisi nostrum, pariatur porro quam quibusdam quos ratione repudiandae sapiente soluta temporibus totam
        veritatis vero voluptas!
    </div>
    <div>Aliquid animi aspernatur atque aut beatae cumque dolore enim esse iure minus nesciunt nisi, sunt, unde velit,
        vero. Cumque delectus hic pariatur sit soluta. Eos hic rerum ullam veniam veritatis.
    </div>
    <div>Dicta eos, molestiae nam qui reiciendis suscipit unde? Alias, culpa dicta explicabo hic illo itaque iure magnam
        magni minima minus odit optio possimus quaerat quos sed soluta unde vero voluptatem.
    </div>
    <div>Beatae consequatur deserunt eveniet illum libero nostrum officia sit soluta ut voluptas. Doloremque ducimus
        fugiat hic illo, iusto laudantium magni molestiae mollitia necessitatibus nemo odio quibusdam repellendus totam
        veritatis voluptatibus.
    </div>
    <div>Alias asperiores, blanditiis consectetur corporis cumque debitis deleniti, deserunt dicta doloremque dolores
        esse eveniet fugit iste odio perspiciatis, placeat possimus praesentium provident quia quo repellat rerum
        sapiente sed temporibus vero.
    </div>
    <div>Consequatur earum esse, ipsum itaque magni quis saepe. A animi assumenda, debitis dolores ea earum facilis iste
        magni maxime minima mollitia odit perferendis placeat quis, reiciendis repellat rerum voluptatibus voluptatum.
    </div>
    <div>Ad, amet asperiores beatae blanditiis commodi consectetur dicta dolorem doloribus et ex excepturi fugit iste
        iusto laborum magni molestiae nulla, obcaecati odio officia provident quae quidem, repellat suscipit totam
        voluptates!
    </div>
    <div>A amet at deleniti deserunt dolores, ea eligendi eos hic laudantium, neque nobis non optio porro provident
        quisquam recusandae sunt voluptatibus. Atque debitis, excepturi ipsum iure officia possimus quae rem.
    </div>
    <div>A accusamus animi, at aut consequatur cupiditate dicta dignissimos doloribus explicabo fuga harum impedit ipsam
        minima nesciunt nisi odit officiis pariatur quia reiciendis sapiente similique sunt tempore temporibus voluptas
        voluptatem.
    </div>
    <div>Ab at consequatur delectus eaque, eligendi, fuga iure magni minima molestias nam neque perferendis possimus,
        quae qui quis recusandae veritatis. Autem dolores doloribus fugiat nihil voluptatum. A error explicabo totam.
    </div>
    <div>Amet blanditiis harum, incidunt ipsam laudantium minima modi optio quis, quo repellendus velit, voluptates.
        Accusamus aperiam delectus dicta, eaque eligendi esse est eveniet harum, incidunt inventore nisi qui sunt,
        voluptatum!
    </div>
    <div>A accusamus dignissimos dolores enim eos facilis, maxime saepe vero? Adipisci alias aut dignissimos, ea
        eligendi excepturi explicabo incidunt, ipsam iusto laudantium nemo nobis non nulla odio officiis ullam vero?
    </div>
    <div>Ab amet aspernatur atque blanditiis cum ducimus fuga illo impedit in, iure labore magni molestiae molestias
        natus non nostrum perferendis provident quam, repudiandae sint sit temporibus vel veritatis vitae, voluptates.
    </div>
    <div>Architecto culpa ipsum numquam, pariatur provident sapiente sit totam. Amet aperiam atque aut dignissimos
        dolore eligendi excepturi explicabo fugiat inventore iusto laborum minus odio quibusdam sequi sint, ut
        voluptates voluptatibus!
    </div>
    <div>Eaque quae, quasi. Eveniet maiores molestiae omnis reiciendis ut. A atque blanditiis consequuntur cumque
        delectus dolore ducimus eius est, et illum maiores non obcaecati quam totam ullam voluptate voluptatibus. A?
    </div>
</div>
<script>
    let wq=document.getElementById('qw');
    wq.addEventListener('click',function () {
        alert('hello world');
    })
    let selector=document.querySelector('span');
    selector.addEventListener('mouseover',function () {
        console.log('鼠标移入');
    })
    window.addEventListener('scroll',function () {
        console.log('滚动');
    })
    window.addEventListener('resize',function () {
        console.log('窗口大小改变');
    })
    document.addEventListener('visibilitychange',function () {
        if(document.visibilityState=='hidden'){
            console.log('用户离开节面');
        }else{
            console.log('用户返回节面');
        }
    })
</script>
</body>
</html>